<template>
  <el-drawer
    title="新增组织结构"
    :visible="drawer"
    @close="close"
    size='50%'
    direction="rtl">
    <el-card style="margin: 10px;">
      <el-form :model="orgTypeReport" ref="orgInfoForm">
        <el-form-item>
          机构部门：
          <el-select placeholder="请输入机构部门" filterable style="width: 200px;" v-model="orgTypeReport.orgId">
            <el-option
              v-for="item in orgs"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          项目类型：
          <el-select placeholder="请输入项目类型" filterable style="width: 200px;" v-model="orgTypeReport.typeId">
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          开销：
          <el-input placeholder="请输入开销" type="number" style="width: 200px;" v-model="orgTypeReport.value">
          </el-input>
        </el-form-item>
        <el-form-item>
          出帐日期：
          <el-date-picker
            v-model="orgTypeReport.date"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <div align="center">
      <el-button type="dark" style="margin: 10px;" icon="el-icon-edit" @click="submit" plain>提交</el-button>
      <el-button type="dark" style="margin: 10px;" icon="el-icon-edit" @click="close" plain>取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {selectOrg} from '@/api/org'
import {selectType} from '@/api/type'
import {save} from '@/api/orgTypeData'

export default {
  props: {
    drawer: Boolean,
    orgTypeReport: {
      type: Object,
      default: () => {
        return {
          id: null,
          orgId: null,
          typeId: null,
          date: null,
          value: null
        }
      }
    }
  },
  data(){
    return {
      orgs:[],
      types:[]
    }
  },
  mounted() {
    selectOrg().then(response=>{
      this.orgs = response.data
    })
    selectType().then(response=>{
      this.types = response.data
    })
  },
  /*watch: {
    "drawer": function (v) {
      console.info(v)
    }
  },*/
  methods: {
    close() {
      this.$emit("close", false)
    },
    submit() {
      save(this.orgTypeReport).then(() => {
        this.close()
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        });
      }).catch(() => {
        this.close()
        this.$notify.error({
          title: '错误',
          message: '保存失败'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
